// 文章容器
const postsContainer = document.getElementById('posts-container')

// 加载动画
const loading = document.querySelector('.loader')


// 1.1 定义所需变量
// 每次加载的文章数量
let limit = 5

// 设置页数默认值
let page = 0

// 是否正在加载
let isLoading = false

showMorePosts()

// 获取文章

async function getPosts() {
 const { data } = await axios({
   url: 'https://jsonplaceholder.typicode.com/posts',
   params: {
     _limit: limit,
     _page: page,
  },

})
 return data
}

// 2. 展示文章
async function showMorePosts() {
 // 2.1 正在加载设为true
 isLoading = true
 // 2.2 展示加载动画
 showLoading()

 // 2.3 页数加1
 page++
 // 2.4 发请求获取文章
 const posts = await getPosts()
 // 2.5 正在加载设为false

 isLoading = false
 // 2.6 隐藏加载动画

 hideLoading()
 // 2.7 渲染文章
 posts.forEach((post) => {

   const postEl = document.createElement('div')
   postEl.classList.add('post')
   postEl.innerHTML = `
     <div class="number">${post.id}</div>
     <div class="post-info">
       <h2 class="post-title">${post.title}</h2>
       <p class="post-body">${post.body}</p>
     </div>
   `
   postsContainer.appendChild(postEl)
})
}

function showLoading() {
 loading.classList.add('show')
}

function hideLoading() {
 loading.classList.remove('show')
}


// 3. 监听滚动事件
window.addEventListener('scroll', () => {
 const { scrollTop, scrollHeight, clientHeight } = document.documentElement
 // 3.1 滚动到距离底部50px，且不在加载中，就加载更多文章
 if (clientHeight + scrollTop >= scrollHeight - 50 && !isLoading) {
   showMorePosts()
}
})